<!--
 * @Author: mia.chen mia.chen@webpowerchina.com
 * @Date: 2024-01-17 14:52:37
 * @LastEditors: mia.chen mia.chen@webpowerchina.com
 * @LastEditTime: 2024-01-17 17:54:56
 * @FilePath: \learn-project\src\components\HelloWorld.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { ref } from "vue";
import { routesList } from "../router";
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

let activePath = ref(routesList[0].path);
</script>

<template>
  <el-menu
    class="el-menu-demo"
    background-color="#f5f5f5"
    active-background-color="#ecf2fe"
    text-color="#595959"
    @select="handleSelect"
    :default-active="activePath"
    router
  >
    <!-- <el-menu-item v-for="item in routesList" :key="item.path" :route="item.path" :index="item.path">
      {{ item.meta?.name }}
    </el-menu-item> -->
    <el-sub-menu index="1">
      <template #title>
        <el-icon><location /></el-icon>
        <span>平台管理</span>
      </template>
      <el-menu-item  route="/page1" index="/page1">用户管理</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="2">
      <template #title>
        <el-icon><location /></el-icon>
        <span>视频监控</span>
      </template>
        <el-menu-item route="/video-monitor" index="/video-monitor">视频监控设备管理</el-menu-item>
        <el-menu-item route="/video-stats" index="/video-stats">设备报警信息</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="3">
      <template #title>
        <el-icon><location /></el-icon>
        <span>人脸识别模块</span>
      </template>
      <el-menu-item route="/page2" index="/page2">人脸识别</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
